// 使用React的列表渲染
// 我们经常需要遍历一个数组来重复渲染一段结构
// 在react中，通过map方法进行列表的渲染（💥 map方法 需要 返回值）

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

const list = ['苹果', '西瓜', '香蕉'];

const divNode = (
  <>
    {/* key：有ID用ID，没有ID用索引 */}
    <div>
      {list.map((item, index) => {
        return <div key={index}>{item}</div>;
      })}
    </div>
  </>
);

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(divNode);
